<template>
  <div class="datail">
    <p>{{ title }}</p>
    <div v-for="(item, index) in lists" :key="index">
      <p>{{ item.msg }}</p>
      <!-- <img :src="item.playlist.coverImgUrl" alt="" v-if="!flag" /> -->
      <van-divider
        :style="{
          color: '#1989fa',
          borderColor: '#1989fa',
          padding: '20px 16px',
        }"
      >
      </van-divider>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      list: [],
      title: "",
      lists: [],
      flag: true,
    };
  },
  computed: {},
  watch: {},

  methods: {
    async datai() {
      await axios
        .get(
          "http://localhost:3000/topic/detail?actid=" + this.$route.params.actid
        )
        .then((res) => {
          console.log("话题", res);
          this.title = res.data.act.title;
          console.log(this.title);
        });
    },
    getdatais() {
      axios
        .get(
          "http://localhost:3000/topic/detail/event/hot?actid=" +
            this.$route.params.actid
        )
        .then((res) => {
          // console.log(res);
          this.list = res.data.events;
          this.lists = [];

          this.list.forEach((v) => {
            this.lists.push(JSON.parse(v.json));
          });
          console.log(this.lists[0]);

          if (this.list.length == 0) {
            Toast("当前还没有人留言哦");
          }
          if (this.lists[0].song) {
            this.flag = true;
          } else {
            this.flag = true;
          }
        });
    },
    getdataislist() {},
  },

  created() {
    this.getdatais();
    this.datai();
    this.getdataislist();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
p {
  text-indent: 20px;
  text-align: center;
}
.follow {
  display: none;
}
img {
  width: 100%;
}
</style>